<script setup>
import { h, ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import CustomTable from "@/components/CustomTable/index"; //公共组件
import { inPersonTypes, personCategorys } from "@/utils/common/constants";
// Mock数据
const mockData = Array.from({ length: 50 }, (_, i) => ({
  roomId: `R${1000 + i}`,
  roomType: ["one", "two", "three"][Math.floor(Math.random() * 3)],
  area: Math.floor(Math.random() * 50) + 30,
  currentResidents: Math.floor(Math.random() * 5),
  maxResidents: Math.floor(Math.random() * 3) + 2,
  managementUnit: ["xx单位A部", "xx单位B部", "xx单位管理处"][
    Math.floor(Math.random() * 3)
  ],
  accessControlId: `AC${2000 + i}`,
  accessControlStatus: Math.random() > 0.2 ? "normal" : "fault",
  relatedCameras: Array.from(
    { length: Math.floor(Math.random() * 1) + 1 },
    (_, j) => `CAM${3000 + i}${j}`
  ),
}));

// 数据定义
const customTableData = ref({
  data: [],
  currentPage: 1,
  pageSize: 10,
  total: 0,
});
const columns = ref([
  { prop: "name", label: "姓名" },
  { prop: "workUnit", label: "工作单位" },
  { prop: "personType", label: "人员类型" },
  { prop: "personCategory", label: "人员类别" },
  { prop: "duty", label: "责任单位" },
  { prop: "handled", label: "经办人" },
  { prop: "phone", label: "手机号码" },
  { prop: "idcard", label: "身份证号" },
  { prop: "applyCurrentRegion", label: "申请通行区域" },
  { prop: "authorized", label: "已授权区域" },
  { prop: "informationStatus", label: "信息状态" },
  { prop: "testTask", label: "试验任务" },
  { prop: "updateTime", label: "更新时间" },
]);
const dutyOptions = [
  {
    value: "guide",
    label: "Guide",
    children: [
      {
        value: "disciplines",
        label: "Disciplines",
        children: [
          {
            value: "consistency",
            label: "Consistency",
          },
          {
            value: "feedback",
            label: "Feedback",
          },
          {
            value: "efficiency",
            label: "Efficiency",
          },
          {
            value: "controllability",
            label: "Controllability",
          },
        ],
      },
      {
        value: "navigation",
        label: "Navigation",
        children: [
          {
            value: "side nav",
            label: "Side Navigation",
          },
          {
            value: "top nav",
            label: "Top Navigation",
          },
        ],
      },
    ],
  },
];
const dutyProps = {
  checkStrictly: true,
};
const refAddAndEditRoom = ref(null);
const selectedRows = ref([]);

const cameraOptions = Array.from({ length: 20 }, (_, i) => ({
  value: `CAM${4000 + i}`,
  label: `摄像头${4000 + i}`,
}));

const searchForm = reactive({
  name: "",
  personType: "",
  personCategory: "",
  phone: "",
  idcard: "",
  startDate: "",
  endDate: "",
  handled: "",
  duty: "",
});

// 查询
const handleSearch = () => {
  customTableData.currentPage = 1;
  fetchData();
};
// 重置
const resetSearch = () => {
  Object.assign(searchForm, {
    roomId: "",
    roomType: "",
    managementUnit: "",
  });
  handleSearch();
};
// 新建房间
const handleAdd = () => {
  refAddAndEditRoom.value.showDialog("新建房间", null, false);
};
// 删除数据
const handleDelete = (row) => {
  ElMessageBox.confirm("确认删除该房间记录?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage.success("删除成功");
      fetchData();
    })
    .catch(() => {});
};
// 初始化
onMounted(() => {
  fetchData();
});

// 方法定义
const fetchData = () => {
  // 模拟API请求
  setTimeout(() => {
    let data = [...mockData];
    // 模拟筛选
    if (searchForm.roomId) {
      data = data.filter((item) => item.roomId.includes(searchForm.roomId));
    }
    if (searchForm.roomType) {
      data = data.filter((item) => item.roomType === searchForm.roomType);
    }
    if (searchForm.managementUnit) {
      data = data.filter((item) =>
        item.managementUnit.includes(searchForm.managementUnit)
      );
    }
    // 模拟分页
    const start = (customTableData.currentPage - 1) * customTableData.pageSize;
    const end = start + customTableData.pageSize;
    customTableData.data = data.slice(start, end);
    customTableData.total = data.length;
  }, 300);
};
// 表格复选框选中
const handleSelectionChange = (rows) => {
  selectedRows.value = rows;
};
// 表格条数改变
const handleSizeChange = (val) => {
  customTableData.pageSize = val;
  fetchData();
};
// 表格分页切换
const handleCurrentChange = (val) => {
  customTableData.currentPage = val;
  fetchData();
};
</script>

<template>
  <div id="internalAuthorize">
    <!-- 搜索区域 -->
    <el-card shadow="never" class="customCardHead">
      <el-form :inline="true" :model="searchForm" label-width="100px">
        <div class="leftInput">
          <el-form-item label="人员类型">
            <el-select
              v-model="searchForm.personType"
              placeholder="请选择"
              clearable
              popper-class="custom-select-dropdown"
            >
              <el-option
                v-for="item in inPersonTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="人员类别">
            <el-select
              v-model="searchForm.personCategory"
              placeholder="请选择"
              clearable
              popper-class="custom-select-dropdown"
            >
              <el-option
                v-for="item in personCategorys"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input
              v-model="searchForm.roomId"
              placeholder="请输入姓名"
              clearable
            />
          </el-form-item>
          <el-form-item label="责任单位">
            <el-cascader :options="dutyOptions" :props="dutyProps" clearable />
          </el-form-item>

          <el-form-item label="经办人">
            <el-input
              v-model="searchForm.handled"
              placeholder="请输入经办人"
              clearable
            />
          </el-form-item>

          <el-form-item label="身份证号码">
            <el-input
              v-model="searchForm.idcard"
              placeholder="请输入身份证号码"
              clearable
            />
          </el-form-item>

          <el-form-item label="手机号码">
            <el-input
              v-model="searchForm.phone"
              placeholder="请输入手机号码"
              clearable
            />
          </el-form-item>

          <el-form-item label="开始时间">
            <el-date-picker
              v-model="searchForm.startDate"
              type="date"
              placeholder="请输入开始时间"
            />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="searchForm.endDate"
              type="date"
              placeholder="请输入结束时间"
            />
          </el-form-item>
        </div>
        <div class="rightBtn">
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon> 搜索</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button @click="resetSearch" class="el-button--default">
              <el-icon><RefreshRight /></el-icon> 重置</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </el-card>

    <!-- 表格按钮 -->
    <div class="customTableContent">
      <div class="tableTool">
        <el-button type="primary" @click="handleAdd">
          <!-- <el-icon><Plus /></el-icon> -->

          批量授权
        </el-button>
      </div>
      <!-- 表格区域 -->
      <div class="tableList">
        <CustomTable
          :currentPageData="customTableData"
          :columns="columns"
          :showSelection="true"
          @handleSelectionChange="handleSelectionChange"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        >
        </CustomTable>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
#internalAuthorize {
  width: 100%;
  height: 100%;
  background: #0c2145;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; // 垂直排列子元素
}
</style>

